<template>
  <div>
    
    账号: <input type="text" v-model="userInfo.account"><br><br>
    密码: <input type="password" v-model="userInfo.password"><br><br>
    性别:   男<input type="radio" name="gender" v-model="userInfo.gender" value="male">
            女<input type="radio" name="gender" v-model="userInfo.gender" value="female"><br><br>
    爱好:   抽烟<input type="checkbox" v-model="userInfo.habby" value="smoke"> 
            喝酒<input type="checkbox" v-model="userInfo.habby" value="drink"> 
            烫头<input type="checkbox" v-model="userInfo.habby" value="perm"><br><br>
    所属校区: 
    <select v-model="userInfo.city">
        <option value="">请选择校区</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="shenzhen">深圳</option>
        <option value="wuhan">武汉</option>
        <option value="xian">西安</option>
    </select><br><br>
    其他信息: 
    <textarea v-model="userInfo.other"></textarea><br><br>
    <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="https://www.baidu.com">《用户协议》</a><br><br>
    <button @click="submit">提交</button>

  </div>
</template>

<script>
    export default {
        name: 'Register',
        data(){
            return{
                userInfo: {
                    account: '',
                    password: '',
                    gender: '',
                    habby: [],
                    city: '',
                    other: '',
                    agree: false
                }
            }
        },
        methods: {
            submit(){
                console.log(this.userInfo)
            }
        }
    }
</script>

<style>
    h2{
        color: greenyellow;
    }
</style>